<app-toolbar>
  <nz-space>
    <button nz-button *nzSpaceItem nzType="default" (click)="clear()">清空</button>
    <button nz-button *nzSpaceItem nzType="primary" (click)="add()">添加</button>
  </nz-space>
</app-toolbar>


<nz-table [nzData]="formArray.controls" [nzFrontPagination]="false" nzSize="small" [formGroup]="formGroup">
  <thead>
  <tr>
    <th>类型</th>
    <th>定时</th>
    <th>执行命令</th>
    <th>禁用</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody formGroupName="items" cdkDropList (cdkDropListDropped)="drop($event)" >
  <tr *ngFor="let data of formArray.controls; let i=index" [formGroupName]="i" cdkDrag>
    <td>
      <nz-select formControlName="type" nzSize="small" (ngModelChange)="change()" (change)="change()">
        <nz-option nzValue="clock" nzLabel="定时"></nz-option>
        <nz-option nzValue="crontab" nzLabel="crontab"></nz-option>
      </nz-select>
    </td>
    <td>
      <app-minute-time-picker *ngIf="data.value.type=='clock'"  formControlName="clock" nzSize="small" (change)="change()"></app-minute-time-picker>
      <input *ngIf="data.value.type=='crontab'"  nz-input formControlName="crontab" nzSize="small" (change)="change()"/>
    </td>
    <td>
      <app-edit-invokes formControlName="invokes" (change)="change()"></app-edit-invokes>
    </td>
    <td>
      <label nz-checkbox formControlName="disabled" (change)="change()" (ngModelChange)="change()"></label>
    </td>
    <td>
      <a cdkDragHandle title="移动">
        <i nz-icon nzType="drag" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a cdkDragHandle title="复制" (click)="copy(i)">
        <i nz-icon nzType="copy" nzTheme="outline"></i>
      </a>
      <nz-divider nzType="vertical"></nz-divider>
      <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="remove(i)" title="删除">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </a>
    </td>
  </tr>
  </tbody>
</nz-table>
